<template><div><h2 id="树状表格" tabindex="-1"><a class="header-anchor" href="#树状表格"><span>树状表格</span></a></h2>
<p>树状表格支持分页和点击加载功能，特别适合用来展示数据量较大的多层级结构数据。<br>
<img src="@source/dcat-admin-2x/assets/images/f8d0ea9a-5983-474b-9049-d84de3604f5d-JuTmkmkxP9.png" alt=""></p>
<h3 id="表结构和模型" tabindex="-1"><a class="header-anchor" href="#表结构和模型"><span>表结构和模型</span></a></h3>
<p>要使用树状表格，要遵守约定的表结构：</p>
<blockquote>
<p>此表结构和模型可完全兼容 <code v-pre>[模型树](https://learnku.com/docs/dcat-admin/1.x/basic-use/8122)</code> 。</p>
</blockquote>
<div class="language-sql line-numbers-mode" data-highlighter="prismjs" data-ext="sql" data-title="sql"><pre v-pre class="language-sql"><code><span class="line"><span class="token keyword">CREATE</span> <span class="token keyword">TABLE</span> <span class="token identifier"><span class="token punctuation">`</span>demo_categories<span class="token punctuation">`</span></span> <span class="token punctuation">(</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token keyword">unsigned</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">AUTO_INCREMENT</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>parent_id<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">)</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>order<span class="token punctuation">`</span></span> <span class="token keyword">int</span><span class="token punctuation">(</span><span class="token number">11</span><span class="token punctuation">)</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token comment">// order 字段不是必须的，不设置也可以</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>title<span class="token punctuation">`</span></span> <span class="token keyword">varchar</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span> <span class="token keyword">COLLATE</span> utf8_unicode_ci <span class="token operator">NOT</span> <span class="token boolean">NULL</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>created_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token keyword">CURRENT_TIMESTAMP</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token identifier"><span class="token punctuation">`</span>updated_at<span class="token punctuation">`</span></span> <span class="token keyword">timestamp</span> <span class="token operator">NOT</span> <span class="token boolean">NULL</span> <span class="token keyword">DEFAULT</span> <span class="token keyword">CURRENT_TIMESTAMP</span> <span class="token keyword">ON</span> <span class="token keyword">UPDATE</span> <span class="token keyword">CURRENT_TIMESTAMP</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token keyword">PRIMARY</span> <span class="token keyword">KEY</span> <span class="token punctuation">(</span><span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">)</span> <span class="token keyword">ENGINE</span><span class="token operator">=</span><span class="token keyword">InnoDB</span> <span class="token keyword">DEFAULT</span> <span class="token keyword">CHARSET</span><span class="token operator">=</span>utf8 <span class="token keyword">COLLATE</span><span class="token operator">=</span>utf8_unicode_ci</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面的表格结构里面有三个必要的字段<code v-pre>id</code>、<code v-pre>parent_id</code>、<code v-pre>title</code>,其它字段没有要求。</p>
<p>对应的模型为<code v-pre>app/Models/Category.php</code>:</p>
<blockquote>
<p>为了便于阅读，这里不再展示 <code v-pre>Repository</code> 代码。</p>
</blockquote>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Demo</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Model</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Category</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$table</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'demo_categories'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>表结构中的三个字段<code v-pre>parent_id</code>、<code v-pre>order</code>、<code v-pre>title</code>的字段名也是可以修改的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Demo</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Model</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Category</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$table</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'demo_categories'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$titleColumn</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'name'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$orderColumn</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'sort'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$parentColumn</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'pid'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你的数据表不需要 <code v-pre>order</code> 字段排序，则在模型中添加如下代码即可</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Demo</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Traits<span class="token punctuation">\</span>ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Model</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Category</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$table</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'demo_categories'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 返回空值即可禁用 order 字段</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">getOrderColumn</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token constant">null</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用" tabindex="-1"><a class="header-anchor" href="#使用"><span>使用</span></a></h3>
<p>通过调用 <code v-pre>Grid\Column::tree</code> 方法即可开启树状表格功能，开启之后默认只查询最顶级节点的数据，子节点数据需要点击加载</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>Demo</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Category</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>AdminController</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">CategoryController</span> <span class="token keyword">extends</span> <span class="token class-name">AdminController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Category</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'ID'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">bold</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">title</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 开启树状表格功能 </span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">order</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">created_at</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">updated_at</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Filter</span> <span class="token variable">$filter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token variable">$filter</span><span class="token operator">-></span><span class="token function">like</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'slug'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$filter</span><span class="token operator">-></span><span class="token function">like</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token variable">$filter</span><span class="token operator">-></span><span class="token function">like</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'http_path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面的代码执行的 <code v-pre>sql</code> 如下（默认只查询 <code v-pre>parent = 0</code> 的数据）：</p>
<div class="language-sql line-numbers-mode" data-highlighter="prismjs" data-ext="sql" data-title="sql"><pre v-pre class="language-sql"><code><span class="line"><span class="token keyword">select</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token operator">*</span><span class="token punctuation">)</span> <span class="token keyword">as</span> aggregate <span class="token keyword">from</span> <span class="token identifier"><span class="token punctuation">`</span>demo_categories<span class="token punctuation">`</span></span> <span class="token keyword">where</span> <span class="token identifier"><span class="token punctuation">`</span>parent_id<span class="token punctuation">`</span></span> <span class="token operator">=</span> <span class="token number">0</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">select</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token identifier"><span class="token punctuation">`</span>demo_categories<span class="token punctuation">`</span></span> <span class="token keyword">where</span> <span class="token identifier"><span class="token punctuation">`</span>parent_id<span class="token punctuation">`</span></span> <span class="token operator">=</span> <span class="token number">0</span> <span class="token keyword">order</span> <span class="token keyword">by</span> <span class="token identifier"><span class="token punctuation">`</span>order<span class="token punctuation">`</span></span> <span class="token keyword">asc</span><span class="token punctuation">,</span> <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token keyword">asc</span> <span class="token keyword">limit</span> <span class="token number">20</span> <span class="token keyword">offset</span> <span class="token number">0</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>Grid\Column::tree</code> 方法参数</p>
<ul>
<li><code v-pre>bool</code> <code v-pre>$showAll</code> <code v-pre>false</code> 是否一次性展示下一层级的所有节点，默认分页展示</li>
<li><code v-pre>bool</code> <code v-pre>$sortable</code> <code v-pre>true</code> 是否开启排序功能</li>
</ul>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 禁用分页功能，一次性加载所有下一层级节点</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">title</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token constant boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 不需要 order 字段排序，第二个参数传 false 即可</span></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">title</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">,</span> <span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="orderable排序" tabindex="-1"><a class="header-anchor" href="#orderable排序"><span>orderable排序</span></a></h3>
<p><code v-pre>orderable</code> 排序功能依赖 <a href="https://github.com/spatie/eloquent-sortable" target="_blank" rel="noopener noreferrer">spatie/eloquent-sortable</a> 组件，需要修改模型：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Spatie<span class="token punctuation">\</span>EloquentSortable<span class="token punctuation">\</span>Sortable</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Category</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span> <span class="token keyword">implements</span> <span class="token class-name">Sortable</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">ModelTree</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 设置排序字段，默认order</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token variable">$orderColumn</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'sort'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>下面是使用示例</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">CategoryController</span> <span class="token keyword">extends</span> <span class="token class-name">AdminController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Category</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'ID'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">bold</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">title</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 开启树状表格功能 </span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">order</span><span class="token operator">-></span><span class="token function">orderable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 开启排序功能</span></span>
<span class="line"></span>
<span class="line">            <span class="token operator">...</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="关于数据搜索" tabindex="-1"><a class="header-anchor" href="#关于数据搜索"><span>关于数据搜索</span></a></h3>
<p>如果在树状表格中使用了搜索功能（<code v-pre>Grid::filter</code>、<code v-pre>Grid\Column::filter</code>、<code v-pre>Grid::quickSearch</code>），为了让用户能搜索到想要的数据，则会<strong>取消只查最顶级数据的操作</strong>。</p>
<blockquote>
<p>使用 <a href="https://learnku.com/docs/dcat-admin/1.x/query-filtering/8097" target="_blank" rel="noopener noreferrer">查询过滤</a>、<a href="https://learnku.com/docs/dcat-admin/1.x/column-filter/8098" target="_blank" rel="noopener noreferrer">列过滤器</a>、<a href="https://learnku.com/docs/dcat-admin/1.x/quick-search/8099" target="_blank" rel="noopener noreferrer">快捷搜索</a> 等搜索功能都会<strong>取消只查最顶级数据的操作</strong>，只有 <a href="https://learnku.com/docs/dcat-admin/1.x/specification-filter/8100" target="_blank" rel="noopener noreferrer">筛选器</a> 和 <a href="https://learnku.com/docs/dcat-admin/1.x/query-filtering/8097#scope" target="_blank" rel="noopener noreferrer">范围查询scope</a> 等功能例外。</p>
</blockquote>
<p>例如下面的代码开启了快捷搜索</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">CategoryController</span> <span class="token keyword">extends</span> <span class="token class-name">AdminController</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">grid</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Grid</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Category</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Grid</span> <span class="token variable">$grid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">id</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'ID'</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">bold</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">sortable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">title</span><span class="token operator">-></span><span class="token function">tree</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 开启树状表格功能 </span></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token property">order</span><span class="token operator">-></span><span class="token function">orderable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 开启排序功能</span></span>
<span class="line"></span>
<span class="line">            <span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">quickSearch</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'title'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token operator">...</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>且用户在浏览器中使用了快捷搜索，则产生<code v-pre>sql</code>如下</p>
<div class="language-sql line-numbers-mode" data-highlighter="prismjs" data-ext="sql" data-title="sql"><pre v-pre class="language-sql"><code><span class="line"><span class="token keyword">select</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token operator">*</span><span class="token punctuation">)</span> <span class="token keyword">as</span> aggregate <span class="token keyword">from</span> <span class="token identifier"><span class="token punctuation">`</span>demo_categories<span class="token punctuation">`</span></span> <span class="token keyword">where</span> <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token operator">like</span> <span class="token string">"%xxx%"</span> <span class="token operator">or</span> <span class="token identifier"><span class="token punctuation">`</span>title<span class="token punctuation">`</span></span> <span class="token operator">like</span> <span class="token string">"%xxx%"</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">select</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token identifier"><span class="token punctuation">`</span>demo_categories<span class="token punctuation">`</span></span> <span class="token keyword">where</span> <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token operator">like</span> <span class="token string">"%xxx%"</span> <span class="token operator">or</span> <span class="token identifier"><span class="token punctuation">`</span>title<span class="token punctuation">`</span></span> <span class="token operator">like</span> <span class="token string">"%xxx%"</span> <span class="token keyword">order</span> <span class="token keyword">by</span> <span class="token identifier"><span class="token punctuation">`</span>order<span class="token punctuation">`</span></span> <span class="token keyword">asc</span><span class="token punctuation">,</span> <span class="token identifier"><span class="token punctuation">`</span>id<span class="token punctuation">`</span></span> <span class="token keyword">asc</span> <span class="token keyword">limit</span> <span class="token number">20</span> <span class="token keyword">offset</span> <span class="token number">0</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="与模型树功能的差别" tabindex="-1"><a class="header-anchor" href="#与模型树功能的差别"><span>与模型树功能的差别</span></a></h3>
<p><a href="https://learnku.com/docs/dcat-admin/1.x/basic-use/8122" target="_blank" rel="noopener noreferrer">模型树</a>同样可用于展示多层级结构数据，并且支持用拖拽的方式实现数据的层级、排序等操作，但是不支持分页和点击加载功能，只能一次性加载完所有数据，<br>
因此<a href="https://learnku.com/docs/dcat-admin/1.x/basic-use/8122" target="_blank" rel="noopener noreferrer">模型树</a>并不适合用来展示数据量较大的数据。</p>
<p>而树状表格支持分页和点击加载功能，适合用来展示数据量较大的多层级结构数据，但不支持用拖拽的方式实现数据的层级、排序操作。</p>
</div></template>


